@import 'common';

%headline {
    width: 94.4vw;
    //height: 7.3333vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        img {
            width: 7.6vw;
            height: 9.8667vw;
            vertical-align: middle;
        }

        span {
            font-size: 3.4667vw;

        }
    }

    .right {
        display: flex;
        align-items: center;

        img {
            width: 3.3333vw;
            height: 3.4667vw;
            vertical-align: middle;
        }

        span {
            font-size: 3.2vw;
        }
    }
}





.web {
    header {

        //未读消息
        .right {
            position: relative;

            img {
                width: 8.2667vw;
                height: 5.7333vw;
            }


            //未读消息显示
            &::after {
                content: '2';
                display: block;
                width: 3.7333vw;
                height: 3.7333vw;
                border-radius: 100%;
                font-size: 2.6667vw;
                line-height: 3.7333vw;
                text-align: center;
                color: #ffffff;
                background-color: #fa5050;
                position: absolute;
                top: 0;
                right: 0;
                transform: translateY(-1.3333vw);
            }
        }

    }



    //内容
    main {


        // 我的登录信息
        .myinfm {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 22.6667vw;
                height: 22.6667vw;

            }

            .txt {
                flex: 1;

                margin-left: 3.3333vw;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                a {
                    color: #000;
                    text-decoration: none;
                    font-size: 4vw;
                }

                span {
                    margin-top: 4.9333vw;
                    font-size: 3.4667vw;
                    color: #9d9d9d;
                }
            }

            .right {
                width: 7vw;
                height: 7vw;
                font-size: 11.6vw;
                line-height: 6.1333vw;
                color: #010101;

            }
        }

        //点评 收藏 优惠卷
        ul {
            width: 95%;
            margin: 4vw auto 0;
            display: flex;
            justify-content: space-between;

            li {

                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 26vw;
                height: 20.1333vw;

                img {
                    margin-bottom: 1.3333vw;
                }

                &:first-child {
                    background-color: #b2e0a0;

                    img {
                        width: 10.5333vw;
                        height: 10.9333vw;

                    }

                }

                &:nth-child(2) {
                    background-color: #a0dce0;

                    img {
                        width: 11.2vw;
                        height: 10.6667vw;

                    }

                }

                &:last-child {
                    background-color: #e0b7a0;

                    img {
                        width: 16.5333vw;
                        height: 10.8vw;

                    }
                }


            }






        }

        // 内容
        .content {
            .headline {
                @extend %headline;
                margin-top: 6vw;
            }
            //钱包
            .wallet {
                .left {
                    span {
                        margin-left: 5.0667vw;
                    }
                }

            }

            //待点评
            .commnet {
                .left {
                    
                    img {
                        width: 9.4667vw;
                        height: 9.8667vw;
                    }

                    span {
                        
                        margin-left: 3.0667vw;
                    }
                }

            }
            //找好友
            .findfriend {
                .left {
                    img {
                        width: 12.5333vw;
                        height: 7.7333vw;
                    }


                }

            }
            //足迹
            .footprint {
                .left {
                    img {
                        width: 7.8667vw;
                        height: 7.8667vw;
                    }

                    span {
                        margin-left: 5.0667vw;
                    }
                }

            }
            // 设置
            .setting {
                margin-top: 10.5333vw;
                .left {
                    img {
                        width: 10.4vw;
                        height: 10.5333vw;
                    }

                    span {
                        margin-left: 3.0667vw;
                    }
                }

            }
            //联系
            .contact {
                .left {
                    img {
                        width: 11.2vw;
                        height: 7.8667vw;

                    }

                    span {
                        margin-left: 3.0667vw;
                    }
                }

            }
            //按钮
            .button {
                width: 72vw;
                margin: 4.8vw auto 0;
                display: flex;
                justify-content: space-between;
                button {
                    
                    width: 19.6vw;
                    height: 10.1333vw;
                    background-color: #ff9344;
                    font-size: 3.2vw;
                    border: 0;
                    border-radius: 6.6667vw;
                    color: #ffffff;
                }
            }
        }

    }

}